<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Chart: Selectable Legend test</title>
        <style type="text/css">
            @import "../../../dojo/resources/dojo.css";
            @import "../../../dijit/tests/css/dijitTests.css";
            @import "../../../dijit/themes/claro/claro.css";
			@import "../resources/Legend.css";
        </style>
        <style>
			.bars{
				width:300px;
				height:200px;
			}
			.columns{
				width:300px;
				height:250px;
			}
			.pie {
				width:500px;
				height:300px;
			}
			.bubble{
				width:320px;
				height:300px;
			}
			.spider {
				width:400px;
				height:400px;
			}
			
        </style>

        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dijit.dijit");
            dojo.require("dojox.charting.Chart");
            dojo.require("dojox.charting.axis2d.Default");
            dojo.require("dojox.charting.plot2d.Lines");
            dojo.require("dojox.charting.plot2d.StackedLines");
            dojo.require("dojox.charting.plot2d.StackedAreas");
            dojo.require("dojox.charting.plot2d.Bars");
            dojo.require("dojox.charting.plot2d.ClusteredBars");
            dojo.require("dojox.charting.plot2d.StackedBars");
            dojo.require("dojox.charting.plot2d.Columns");
            dojo.require("dojox.charting.plot2d.ClusteredColumns");
            dojo.require("dojox.charting.plot2d.StackedColumns");
            dojo.require("dojox.charting.plot2d.Candlesticks");
            dojo.require("dojox.charting.plot2d.Spider");
            dojo.require("dojox.charting.plot2d.Scatter");
        	
            dojo.require("dojox.charting.plot2d.Bubble");
            dojo.require("dojox.charting.plot2d.Pie");
			dojo.require("dojox.charting.themes.MiamiNice");
			dojo.require("dojox.charting.widget.SelectableLegend");
			dojo.require("dojox.charting.action2d.Highlight");
			
        	dojo.addOnLoad(function(){
				var bars = new dojox.charting.Chart("bars").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type: "Bars",gap:2}).
					addAxis("x",{natural: true, includeZero: true}).
					addAxis("y",{natural: true, vertical:true}).
					addSeries("A",[1,3,5,7,2,4,6]).
					addSeries("B",[2,4,6,8,3,5,7], {hide: true}).
					render();
				var barsLegend = new dojox.charting.widget.SelectableLegend({chart: bars},"barsLegend");
				
				var clusteredBars = new dojox.charting.Chart("clusteredBars").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type:"ClusteredBars",gap:2}).
					addAxis("x",{natural: true, includeZero: true}).
					addAxis("y",{natural: true, vertical:true}).
					addSeries("A",[1,3,5,7,2,4,6]).
					addSeries("B",[2,4,6,8,3,5,7], {hide: true}).
					addSeries("C",[6,4,2,7,5,3,1]);
					new dojox.charting.action2d.Highlight(clusteredBars, "default");
					clusteredBars.render();
				var clusteredBarsLegend = new dojox.charting.widget.SelectableLegend({chart: clusteredBars},"clusteredBarsLegend");
				
				var stackedBars = new dojox.charting.Chart("stackedBars").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default", {type:"StackedBars",gap:2}).
					addAxis("x",{natual: true, includeZero: true, majorTickStep:1}).
					addAxis("y",{natual: true, vertical: true}).
					addSeries("A",[1,3,5,7,2,4,6]).
					addSeries("B",[2,4,6,8,3,5,7], {hide: true}).
					addSeries("C",[6,4,2,7,5,3,1]).
					render();
				var stackedBarsLegend = new dojox.charting.widget.SelectableLegend({chart: stackedBars, autoScale: true},"stackedBarsLegend");
				
				var lines = new dojox.charting.Chart("lines").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type: "Lines",markers:true}).
					addAxis("y",{natural: true, vertical:true,includeZero: true}).
					addAxis("x",{natural: true,includeZero: true}).
					addSeries("A",[2,4,6,8,3,5,7]).
					addSeries("B",[1,3,5,7,2,4,6],{hide: true}).
					addSeries("C",[6,4,2,7,5,3,1]).
					render();
				var linesLegend = new dojox.charting.widget.SelectableLegend({chart: lines},"linesLegend");
				
				var stackedLines = new dojox.charting.Chart("stackedLines").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type: "StackedLines",markers:true}).
					addAxis("y",{natural: true, vertical:true,includeZero: true}).
					addAxis("x",{natural: true,includeZero: true}).
					addSeries("A",[2,4,6,8,3,5,7]).
					addSeries("B",[1,3,5,7,2,4,6],{hide: true}).
					addSeries("C",[6,4,2,7,5,3,1]).
					render();
				var stackedLinesLegend = new dojox.charting.widget.SelectableLegend({chart: stackedLines, autoScale: true},"stackedLinesLegend");
				
				
				var stackedArea = new dojox.charting.Chart("stackedArea").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default", {type:"StackedAreas",tension:4}).
					addAxis("y",{natural: true, includeZero: true, vertical:true}).
					addAxis("x",{natural: true}).
					addSeries("A",[1,3,5,7,2,4,6]).
					addSeries("B",[2,4,6,8,3,5,7], {hide: true}).
					addSeries("C",[6,4,2,7,5,3,1]).
					render();
				var stackedAreaLegend = new dojox.charting.widget.SelectableLegend({chart: stackedArea, autoScale: true},"stackedAreaLegend");
				
				var candleSticks = new dojox.charting.Chart("candleSticks").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default", {type:"Candlesticks", gap: 3}).
					addAxis("y",{natural: true, includeZero: true, vertical:true}).
					addAxis("x",{natural: true}).
					addSeries("A",[
						{ open: 20, close: 16, high: 22, low: 8 },
						{ open: 16, close: 22, high: 26, low: 6, mid: 18 },
						{ open: 22, close: 18, high: 22, low: 11, mid: 21 },
						{ open: 18, close: 29, high: 32, low: 14, mid: 27 },
						{ open: 29, close: 24, high: 29, low: 13, mid: 27 },
						{ open: 24, close: 8, high: 24, low: 5 },
						{ open: 8, close: 16, high: 22, low: 2 }
					]).
					addSeries("B",[
						{ open: 24, close: 8, high: 24, low: 5 },
						{ open: 8, close: 16, high: 22, low: 2 },
						{ open: 16, close: 12, high: 19, low: 7 },
						{ open: 12, close: 20, high: 22, low: 8 },
						{ open: 20, close: 16, high: 22, low: 8 },
						{ open: 16, close: 12, high: 19, low: 7 },
						{ open: 12, close: 20, high: 22, low: 8 }
					], {hide: true}).
					render();
				var candleSticksLegend = new dojox.charting.widget.SelectableLegend({chart: candleSticks},"candleSticksLegend");
				
				var scatter = new dojox.charting.Chart("scatter").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type: "Scatter",markers:true}).
					addAxis("y",{natural: true, vertical:true,includeZero: true}).
					addAxis("x",{natural: true,includeZero: true}).
					addSeries("A",[2,4,6,8,3,5,7]).
					addSeries("B",[1,3,5,7,2,4,6],{hide: true}).
					addSeries("C",[6,4,2,7,5,3,1]).
					render();
				var scatterLegend = new dojox.charting.widget.SelectableLegend({chart: scatter},"scatterLegend");
				
				
				var columns = new dojox.charting.Chart("columns").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type: "Columns",gap:2}).
					addAxis("y",{natural: true, includeZero: true, vertical:true}).
					addAxis("x",{natural: true}).
					addSeries("A",[1,3,5,7,2,4,6]).
					addSeries("B",[2,4,6,8,3,5,7], {hide: true}).
					render();
				var columnsLegend = new dojox.charting.widget.SelectableLegend({chart: columns},"columnsLegend");
				
				var clusteredColumns = new dojox.charting.Chart("clusteredColumns").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type:"ClusteredColumns",gap:2}).
					addAxis("y",{natural: true, includeZero: true, vertical:true}).
					addAxis("x",{natural: true}).
					addSeries("A",[1,3,5,7,2,4,6]).
					addSeries("B",[2,4,6,8,3,5,7], {hide: true}).
					addSeries("C",[6,4,2,7,5,3,1]).
					render();
				var clusteredColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: clusteredColumns},"clusteredColumnsLegend");
				
				var stackedColumns = new dojox.charting.Chart("stackedColumns").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default", {type:"StackedColumns",gap:2}).
					addAxis("y",{natual: true, includeZero: true, majorTickStep:1, vertical: true}).
					addAxis("x",{natual: true}).
					addSeries("A",[1,3,5,7,2,4,6]).
					addSeries("B",[2,4,6,8,3,5,7], {hidden: true}).
					addSeries("C",[6,4,2,7,5,3,1]).
					render();
				var stackedColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: stackedColumns, autoScale: true},"stackedColumnsLegend");
				
				var linesColumns = new dojox.charting.Chart("linesColumns").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("lines",{type: "Lines",markers:true}).
					addPlot("default",{type: "Columns",gap:2}).
					addAxis("y",{natural: true, vertical:true,includeZero: true}).
					addAxis("x",{natural: true,includeZero: true}).
					addSeries("A",[2,4,6,8,3,5,7]).
					addSeries("B",[1,3,5,7,2,4,6],{plot:"lines", hidden: true}).
					render();
				var linesColumnsLegend = new dojox.charting.widget.SelectableLegend({chart: linesColumns},"linesColumnsLegend");
				
				var pie = new dojox.charting.Chart("pie").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type:"Pie",radius:100,font: "normal normal 10pt Tahoma",htmlLabels:true,labelOffset:-20}).
					addSeries("A",[{
	                    y: 12.1,
	                    text: "China"
	                },{
	                    y: 9.52,
	                    text: "India"
	                }, {
	                    y: 2.66,
	                    text: "USA",
	                    hidden: true
	                }, {
	                    y: 2.06,
	                    text: "Indonesia"
	                }, {
	                    y: 1.63,
	                    text: "Brazil"
	                },{
	                    y: 1.48,
	                    text: "Russian"
	                },{
	                    y: 1.29,
	                    text: "Pakistan"
	                },{
	                    y: 1.25,
	                    text: "Japan"
	                }]).
					render();
				var ainm = new dojox.charting.action2d.Highlight(pie,"default");
				var pieLegend = new dojox.charting.widget.SelectableLegend({chart: pie,horizontal:false, outline: true},"pieLegend");
				
				var bubble = new dojox.charting.Chart("bubble").
					setTheme(dojox.charting.themes.MiamiNice).
					addPlot("default",{type:"Bubble"}).
					addAxis("x",{natual:true, includeZero: true, max:7}).
					addAxis("y",{natual:true, vertical: true, includeZero: true,max:10}).
					addSeries("A",[{x:3,y:5,size:1},{x:1,y:7,size:1},{x:4,y:2,size:3}]).
					addSeries("B",[{x:5,y:5,size:2},{x:2,y:3,size:4},{x:6,y:2,size:1}], {hidden: true}).
					addSeries("C",[{x:2,y:7,size:3},{x:6,y:8,size:3}]).
					render();
				var bubbleLegend = new dojox.charting.widget.SelectableLegend({chart: bubble, horizontal:false, outline:true},"bubbleLegend");
				
				var spider = new dojox.charting.Chart("spider")
					.setTheme(dojox.charting.themes.MiamiNice)
					.addPlot("default", {
						type: "Spider",
						labelOffset: -10,
						divisions: 7,
						axisColor:      "lightgray",
						spiderColor:    "silver",
			            seriesFillAlpha: 0.2,
						spiderOrigin:	 0.16,
						markerSize:  	 3,
						precision:		 0,
						spiderType:	 	 "polygon"
					})
					.addSeries("China", {data: {"GDP": 2,"area": 6,"population": 2000,"inflation": 15,"growth": 12}}, { fill: "blue" })
					.addSeries("France", {data: {"GDP": 6,"area": 15,"population": 500,"inflation": 5,"growth": 6}}, { fill: "red" })
					.addSeries("USA", {data: {"GDP": 3,"area": 20,"population": 1500,"inflation": 10,"growth": 3}}, { fill: "green", hidden: true })
					.addSeries("Japan", {data: {"GDP": 4,"area": 2,"population": 1000,"inflation": 20,"growth": 2}}, { fill: "yellow", hidden: true })
					.addSeries("Korean", {data: {"GDP": 10,"area": 10,"population": 800,"inflation": 2,"growth": 18}}, { fill: "orange" })
					.addSeries("Canada", {data: {"GDP": 1,"area": 18,"population": 300,"inflation": 3,"growth": 15}}, { fill: "purple" })
					.render();
				
				var spiderLegend = new dojox.charting.widget.SelectableLegend({chart: spider, horizontal: false}, "spiderLegend");
				
				dojo.query("h2").forEach(function(node, i){
					node.innerHTML = i+1 +" - "+node.innerHTML;
				});
			})
        
        </script>
    </head>
    <body class="claro">
		<h1>Chart: Selectable Legend</h1>
		<h3>Click the legends</h3>
		<div style="clear:both;">
			<div style="float:left;">
				<h2>Bars</h2>
				<div id="bars" class="bars"></div>
				<div id="barsLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Clustered Bars</h2>
				<div id="clusteredBars" class="bars"></div>
				<div id="clusteredBarsLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Stacked Bars</h2>
				<div id="stackedBars" class="bars"></div>
				<div id="stackedBarsLegend"></div>
			</div>
		</div>
		<div style="clear:both;">
			<div style="float:left;">
				<h2>Columns</h2>
				<div id="columns" class="columns"></div>
				<div id="columnsLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Clustered Columns</h2>
				<div id="clusteredColumns" class="columns"></div>
				<div id="clusteredColumnsLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Stacked Columns</h2>
				<div id="stackedColumns" class="columns"></div>
				<div id="stackedColumnsLegend"></div>
			</div>
		</div>
		<div style="clear:both;">
			<div style="float:left;">
				<h2>Lines</h2>
				<div id="lines" class="bars"></div>
				<div id="linesLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Stacked Lines</h2>
				<div id="stackedLines" class="bars"></div>
				<div id="stackedLinesLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Stacked Area</h2>
				<div id="stackedArea" class="bars"></div>
				<div id="stackedAreaLegend"></div>
			</div>
		
		</div>
		<div style="clear:both;">
			<div style="float:left;">
				<h2>ClandeSticks</h2>
				<div id="candleSticks" class="columns"></div>
				<div id="candleSticksLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Scatter</h2>
				<div id="scatter" class="columns"></div>
				<div id="scatterLegend"></div>
			</div>
			<div style="float:left;">
				<h2>Lines&Columns</h2>
				<div id="linesColumns" class="columns"></div>
				<div id="linesColumnsLegend"></div>
			</div>
		</div>
		<div style="clear:both;">
			<div style="float:left;">
				<h2>Pie</h2>
				<div id="pie" class="pie" style="float:left;"></div>
				<div style="float:left;">
					<div id="pieLegend"></div>
				</div>
			</div>
			<div style="float:left;margin-left:40px">
				<h2>Bubble</h2>
				<div id="bubble" class="bubble" style="float:left;"></div>
				<div style="float:left;">
					<div id="bubbleLegend"></div>
				</div>
			</div>
			<div style="float:left;">
				<h2>Spider</h2>
				<div id="spider" class="spider" style="float:left;"></div>
				<div style="float:left;">
					<div id="spiderLegend"></div>
				</div>
			</div>
			
		</div>

    </body>
</html>
